<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Driver Manager</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">
        var componentId;
        function requestComponent(id){
            componentId = id;
            var http = new XMLHttpRequest();
            var url = '/components/' + id +'?step=1';
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    var data = http.responseText;
                    var jsoncontent = JSON.parse(data)
                    console.log(data)
                    comps = jsoncontent['components'];
                    var jslength=0;
                    for(var j in comps){
                        jslength++;
                    } 
                    var total = jslength;
                    if(total > 0){
                        var obj_array = new Array();
                        var obj = {'total': total, 'rows': obj_array}
                        for(i in comps){
                            var comp = comps[i];
                            props = comp['properties'];
                            var name;
                            var address;
                            var enabled;
                            var status;
                            var faultCause; 
                            for(j in props){
                                prop = props[j];
                                if(prop['name'] == 'name'){
                                    name = prop['value'];
                                } else if(prop['name'] == 'address'){
                                    address = prop['value'];
                                } else if(prop['name'] == 'enabled'){
                                    enabled = prop['value'];
                                } else if(prop['name'] == 'status'){
                                    status = prop['value'];
                                } else if(prop['name'] == 'faultCause'){
                                    faultCause = prop['value'];
                                } 
                            }
                            obj_array.push({'name':name, 'address':address, 'enabled':enabled, 'status':status, 'faultCause':faultCause})
                        }
                        $('#database').datagrid('loadData',obj);
                    }
                }
            }
            http.open("GET", url);
            http.send(null);
        }
        
        var network_map = new Array();
        var selected_module;
        var selected_component;
        function new_network(){
            $('#new_dlg').dialog('open');
            var http = new XMLHttpRequest();
            var url = '/type_filter_all';
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    var data = http.responseText;
                    var jsoncontent = JSON.parse(data)
                    
                    module_data = new Array();
                    var m_id = 1;
                    for(key in jsoncontent){
                        module_data.push({'id':m_id++, 'text':key});
                        var local_array = new Array()
                        network_map[key] = local_array;
                        networks = jsoncontent[key];
                        var n_id = 1;
                        for(n in networks){
                            local_array.push({'id':n_id++, 'text':networks[n]});
                        }
                        network_map[key] = local_array;
                        console.log(key);
                    }
                    $('#dlg_modules').combobox({
                        textField : 'text',
                        valueField : 'id',
                        data : module_data,
                        onSelect: function(record){
                            load_networks(record);
                        }
                    });
                }
            }
            var json = {'module': 'driver', 'class': 'BasicNetwork'}
            http.open("POST", url);
            http.setRequestHeader('content-type', 'application/json');
            http.send(JSON.stringify(json));
        }

        function load_networks(record){
            console.log(record);
            selected_module = record.text;
            n = network_map[record.text];
            console.log(n);
            if(n == undefined)
                return;
            $('#dlg_network').combobox({
                textField : 'text',
                valueField : 'id',
                data : n
            });
        }

        function select_component(record){
            selected_component = record.text;
        }

        function edit_network(){
            
        }

        function remove_network(){
            
        }

        function main(){

        }

        function add_network(){
            if(selected_module == undefined || selected_component == undefined)
            {
                alert("Please select a network!")
                return;
            }
            name=prompt("Input component name");
            if(name == null||name.length == 0||name == 'null')
                return
            console.log(name);
            var http = new XMLHttpRequest();
            var url = '/component?id=' + componentId + '&name=' + name + '&type=' + selected_module+'.'+selected_component;
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    $('#new_dlg').dialog('close');
                } else if(http.readyState == 4 && http.status == 404){
                    alert('Failed to add a network!')
                }
            }
            http.open("POST", url);
            http.send(null);
        }
    </script>
</head>
<body onload = "main()">
    <h1>Driver Manager</h1>
    <div style="margin:20px 0;"></div>
    <div id="new_dlg" class="easyui-dialog" title="New" data-options="iconCls:'icon-save', buttons: '#dlg-buttons', closed:true" style="width:400px;height:400px;padding:10px">
        <input class="easyui-combobox" id="dlg_modules" name="Modules" style="width:100%;" data-options="
                        valueField:'id',
                        textField:'text',
                        label: 'Modules:',
                        labelPosition: 'top',
                        onSelect: function(record){
                            load_networks(record);
                        }
                        ">
        <input class="easyui-combobox" id="dlg_network" name="Networks" style="width:100%;" data-options="
                        valueField:'id',
                        textField:'text',
                        label: 'Networks:',
                        labelPosition: 'top',
                        onSelect: function(record){
                            select_component(record);
                        }
                        ">
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="add_network()">Ok</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#new_dlg').dialog('close')">Cancel</a>
    </div>
    <table class="easyui-datagrid" id='database'title="Database" style="width:700px;height:250px"
            data-options="singleSelect:true,collapsible:true">
        <thead>
            <tr>
                <th data-options="field:'name',width:80">Name</th>
                <th data-options="field:'address',width:100">Address</th>
                <th data-options="field:'enabled',width:80,align:'right'">Enabled</th>
                <th data-options="field:'status',width:80,align:'right'">Status</th>
                <th data-options="field:'faultCause',width:250">Fault Cause</th>
            </tr>
        </thead>
    </table>
    <div style="margin:20px 0;"></div>
    <button onclick="new_network()">New</button>
    <button onclick="edit_network()">Edit</button>
    <button onclick="remove_network()">Remove</button>
</body>
</html>